<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<title>代金券</title>
		<link rel="stylesheet" type="text/css" href="css/public.css" />
		<link rel="stylesheet" type="text/css" href="css/getcode.css" />
	</head>
	
	<body>
		<div class="hongbao-box" style="display: none;">
			<div class="name"></div>
			<div id="canvas">
				<canvas id="mask" width="170" height="77"></canvas>
				<span id="code-money"></span>
			</div>
			<div class="txt">
				<span id="c_name"></span>
				<label>随机发放1000万代金券</label>
			</div>
			<div class="getBtn" id="getBtn" _id="" _code="">
				<img src="img/btn_img.png" />
			</div>
		</div>
		<div class="success-box">
			<img src="img/yes_icon.png" />
			<div class="msg">
				<span>恭喜您成功领取</span>
				<span id="q_name">惠祥生活广场20元代金券</span>
				<span>请在有效期内使用</span>
			</div>
			<label id="viewNow" _id="">立即查看</label>
		</div>
		<!-- <div class="hongbao-marks">
			
		</div> -->
		<script src="js/jquery.min.js"></script>
		<script src="layui/layui.js" charset="utf-8"></script>
		<script>
			layui.use(['element', 'layer', 'jquery'], function () {
				var layer = layui.layer,
					element = layui.element,
				    $ = layui.jquery;
				var code = getQueryVariable('code');
				var id = getQueryVariable('state');
				layer.ready(function(){
				    //加载优惠券
				    $.ajax({
				    	url:"http://redmany.city1000.cn/red/get/shangdian/id/"+id,
				    	type: "get",
				    	beforeSend:function(){
				    		//弹出的lodinng层
				    	    layer.load(2,{
				    	        shade:[0.5,"#333"]
				    	    });            
				    	},
				    	success: function(res) {
							if(res.code == 200){
								//alert(JSON.stringify(res));
								$('.name').html(res.data.csName);
                              	$('#c_name').html(res.data.csName);
                              	$('#q_name').html(res.data.name);
                              	$('#viewNow').attr('_id',res.data.id);
								//设置优惠券金额
								$('#code-money').html(res.data.many);
								$('#getBtn').attr('_id',res.data.id);
								$('#getBtn').attr('_code',code);
								$('.hongbao-box').show();
							}else{
								layer.msg(res.msg);
							}
				    	},
				    	error:function() { 
				    		layer.msg("请求失败！");
				    	},
				    	complete:function(){
				    		//关掉loading
				    		layer.closeAll("loading")
				    	}
				    });
				});
			});
			
			var canvas = document.getElementById('mask');
			var context = canvas.getContext("2d");
			context.fillStyle = "#d1d1d1";
			context.fillRect(0, 0, 170, 77);
			context.font = '16px arial';
			context.fillStyle = '#404040';
			context.fillText('刮 奖 区', 55,45);
			context.globalCompositeOperation = 'destination-out';
			// 鼠标按下 增加mousemove的事件监听
			canvas.addEventListener('mousedown', drawArcMouseHandle);
			canvas.addEventListener('mouseup', function(event) {
				// 鼠标抬起之后，把mousemove的事件监听撤销掉
				this.removeEventListener('mousemove', mousemoveHandle);
			});
			// 根据鼠标的move画圆
			function drawArcMouseHandle(event) {
				event.preventDefault();
				event.target.addEventListener("mousemove", mousemoveHandle);
			}
			// 为了能够移除movesemove的事件需要单独处理一下
			function mousemoveHandle(event) {
				event.preventDefault();
				drawArcByPoint(event.pageX, event.pageY);
			}
			// 监听 touchmove
			canvas.addEventListener('touchmove', drawArcTouchHandle);
			// 根据触摸点画圆 
			function drawArcTouchHandle(event) {
				event.preventDefault();
				var touch = event.touches[0];
				drawArcByPoint(touch.pageX, touch.pageY);
			}
			// 根据某个点在canvas上画圆
			// x 坐标和 y 坐标 两个坐标是触摸点的坐标而不是画圆的圆心
			// 圆心通过计算得出
			function drawArcByPoint(x, y) {
				context.beginPath();
				context.arc(x - canvas.offsetLeft, y - canvas.offsetTop, 20, 0, Math.PI * 2);
				context.closePath();
				context.fillStyle = '#dddddd';
				context.fill();
				checkComplete();
			}
			// 判断是否完成刮奖 点数大于80%
			function checkComplete() {
				var imgData = context.getImageData(0, 0, 240, 65);
				var pxData = imgData.data; // 获取字节数据
				var len = pxData.length; // 获取字节长度
				var count = 0; // 记录透明点的个数
				// 主要的思想是 一个像素由四个数据组成，每个数据分别是 rgba() 所以第四个数据 a 表示alpha透明度
				for(var i = 0; i < len; i += 4) {
					var alpha = pxData[i + 3]; // 获取每个像素的透明度
					if(alpha < 10) {
						// 透明度小于10 
						count++;
					}
				}
				var percent = count / (len / 4); // 计算百分比
				// 如果百分比大于0.8 则表示成功
				if(percent >= 0.8) {
					$('.txt').css('bottom',66);
					$('#getBtn').show();
				}
			}
			// 显示刮奖结果
			function showResult(msg) {
				msg = msg || "刮奖结束";
				var res = document.getElementById('result');
				res.innerHTML = msg;
			}
			//领券
			var getBtn = document.getElementById('getBtn');
			getBtn.onclick = function(){
				//领券操作
				var id = $(this).attr('_id');
				var code = $(this).attr('_code');
				$.ajax({
					url:"http://redmany.city1000.cn/red/lingqu/post",
					type: "post",
					data:{code:code,qId:id},
					success: function(res) {
						// alert(JSON.stringify(res));
						if(res.code == 200){
							//成功后,显示成功页面
							$('.hongbao-box').hide();
							$('.success-box').show();
						}else{
							alert(res.msg);
						}
					},
					error:function() { 
						alert("请求失败！");
					}
				});
			}
			//查看
			var viewNow = document.getElementById('viewNow');
			viewNow.onclick = function(){
              	var id = $(this).attr('_id');;
              	window.location.href = 'http://redmany.city1000.cn/red/zhuanfa/http:--hesuan.city1000.cn-daijinquan-used.html/'+id;
			}
			// 获取参数
			function getQueryVariable(variable) {
			    // 参数 window.location.search
			    var query = decodeURI(window.location.search.substring(1));
			    var vars = query.split("&");
			    for (var i = 0; i < vars.length; i++) {
			        var pair = vars[i].split("=");
			        if (pair[0] == variable) {
			            return pair[1];
			        }
			    }
			    return (false);
			}
		</script>
	</body>
</html>
